import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";

import "./me.css"
import { Carousel, WingBlank } from 'antd-mobile';

import { actions, getBanner } from "../../store/modules/me";
class Me extends Component {
    componentDidMount() {
        let { reqBanner } = this.props.me
        reqBanner()
    }
    render() {
        let { banner } = this.props
        return (
            <div className="me">
                <div className="top">
                    <h3>我的</h3>
                </div>
                <header>
                    <div className="zuo">
                        <img src="" alt="" />
                        <div>
                            <div className="shang">代用名</div>
                            <div className="xia">完善资料让小U更懂您</div>
                        </div>
                    </div>
                    <div className="you">
                        <img src="" alt="" />
            每日签到
                    </div>
                </header>
                <ul className="shoucang">
                    <li>
                        <p>12</p>
                        <p>我的收藏</p>
                    </li>
                    <li>
                        <p>12</p>
                        <p>浏览记录</p>
                    </li>
                    <li>
                        <p>
                            <span className="xiao">￥</span>
                            <span>0</span>
                        </p>
                        <p>我的红包</p>
                    </li>
                    <li>
                        <p>12</p>
                        <p>优惠券</p>
                    </li>
                </ul>
                <div className="dingdan">
                    <div className="top">
                        <p>我的订单</p>
                        <p>全部订单&nbsp;&nbsp;</p>
                    </div>
                    <ul>
                        <li>
                            <img src="" alt="" />
                            <p>待付款</p>
                        </li>
                        <li>
                            <img src="" alt="" />
                            <p>待收货</p>
                        </li>
                        <li>
                            <img src="" alt="" />
                            <p>评价</p>
                        </li>
                        <li>
                            <img src="" alt="" />
                            <p>售后/退款</p>
                        </li>
                    </ul>
                </div>
                <div className="banner">
                    {/* {
                        banner.map(item => (
                            <div key={item.id}>
                                <img src={item.img} alt="" />
                            </div>
                        ))
                    } */}
                    <WingBlank>
                        <Carousel
                            autoplay={true}
                            // infinite
                        >
                            {banner.map(item => (
                                <img
                                    key={item.id}
                                    src={item.img}
                                    alt=""
                                />
                            ))}
                        </Carousel>
                    </WingBlank>
                </div>
                <ul className="content">
                    <li>
                        <div className="zuo">
                            <img src="" alt="" />
                            <p>地址管理</p>
                        </div>
                        <div className="you">
                            <img src="" alt="" />
                        </div>
                    </li>
                    <li>
                        <div className="zuo">
                            <img src="" alt="" />
                            <p>我的钱包</p>
                        </div>
                        <div className="you">
                            <p>剩余200U币</p>
                            <img src="" alt="" />
                        </div>
                    </li>
                    <li>
                        <div className="zuo">
                            <img src="" alt="" />
                            <p>我的二维码</p>
                        </div>
                        <div className="you">
                            <img src="" alt="" />
                        </div>
                    </li>
                    <li>
                        <div className="zuo">
                            <img src="" alt="" />
                            <p>我的小伙伴</p>
                        </div>
                        <div className="you">
                            <img src="" alt="" />
                        </div>
                    </li>
                    <li>
                        <div className="zuo">
                            <img src="" alt="" />
                            <p>0元试用</p>
                        </div>
                        <div className="you">
                            <img src="" alt="" />
                        </div>
                    </li>
                </ul>
            </div>
        );
    }
}

//导入数据
let mapStateToProps = (state) => ({
    banner: getBanner(state)
});

//导入所有方法
let mapDispatchToProps = (dispatch) => ({ me: bindActionCreators(actions, dispatch), });

//将数据和方法给this.props
export default connect(mapStateToProps, mapDispatchToProps)(Me);